---
import LayoutBase from '@/layouts/layout-base.astro'
import { collectDocList, baseDocPath } from './document-list'
import type { NavItem } from '@/constants/nav'
import { Icon } from 'astro-icon/components'

// 收集 doc 列表
const docList = await collectDocList()

// 生成右侧 二级目录 访问链接，如果当前目录访问链接是 # ，则访问目录的第一个子链接
function getSubLink(item: NavItem) {
  if (item.href === '#' && item.children.length) {
    const sortArr = item.children.map((item) => item.sort).sort()
    if (sortArr.length) {
      const currentSort = sortArr[0]
      const firstChild = item.children.find(
        (child) => child.sort === currentSort,
      )
      if (firstChild) {
        return baseDocPath + firstChild.href
      }
    }
  }
  return baseDocPath + item.href
}
---

<LayoutBase title="笔记" description="笔记" gradientHeader>
  <!-- banner -->
  <section id="articleBanner" class={`w-full bg-center bg-cover relative`}>
    <div
      class="c-content m-auto h-full p-8 py-16 pt-32 sm:py-32 sm:pt-48 md:px-0"
    >
    </div>
  </section>
  <!-- 文档列表 -->
  <section class="flex">
    <div class="hidden w-1/6 bg-slate-100 min-w-[200px] sm:flex justify-end">
      <ul class="max-w-[200px] mr-16 mt-8">
        {
          docList.map((nav) => (
            <li class="mb-4 flex items-center hover:text-primary">
              <Icon class="text-xl mr-1" name={nav.icon} />
              <a href={`#${nav.text}`} class="text-base/[2rem]">
                {nav.text}
              </a>
            </li>
          ))
        }
      </ul>
    </div>
    <div class="w-full sm:w-2/3 p-8 min-h-[50vh] sm:min-w-[600px]">
      {
        docList.map((doc) => {
          if (doc.children?.length) {
            if (doc.columns === 1) {
              return (
                <div class="mb-8">
                  <div class="flex items-center mb-4">
                    <Icon class="text-xl mr-2" name={doc.icon} />
                    <h2 id={doc.text} class="text-xl font-medium">
                      {doc.text}
                    </h2>
                  </div>
                  <div class={`border p-6 columns-1`}>
                    {doc.children!.map((item) => (
                      <a
                        href={getSubLink(item)}
                        class="block text-base/[3rem] hover:text-primary"
                      >
                        {item.text}
                      </a>
                    ))}
                  </div>
                </div>
              )
            } else {
              return (
                <div class="mb-8">
                  <div class="flex items-center mb-4">
                    <Icon class="text-xl mr-2" name={doc.icon} />
                    <h2 id={doc.text} class="text-xl font-bold">
                      {doc.text}
                    </h2>
                  </div>
                  <div class={`border p-6 columns-2 sm:columns-3`}>
                    {doc.children!.map((item) => (
                      <a
                        href={getSubLink(item)}
                        class="block text-base/[3rem] hover:text-primary"
                      >
                        {item.text}
                      </a>
                    ))}
                  </div>
                </div>
              )
            }
          }
        })
      }
    </div>
  </section>
</LayoutBase>

<script>
  const articleBanner = document.getElementById('articleBanner')
  if (articleBanner) {
    articleBanner.style.backgroundImage = `url(${window.config.articleBanner})`
  }
</script>
